<template>
    <div id="find">
        <header>
            <!-- 轮播图 -->
           <cube-slide ref="slide" :data="cards">
                <cube-slide-item v-for="(item, index) in cards" :key="index">
                    <a :href="item.url">
                        <img :src="item.imageUrl">
                    </a>
                </cube-slide-item>
            </cube-slide>
        </header>
        <!-- 分类滚动 -->
        <div class="selection">
            <cube-scroll
                ref="scroll"
                :data="selectItems"
                direction="horizontal"
                class="horizontal-scroll-list-wrap">
                <ul class="list-wrapper">
                  <li v-for="(item,index) in selectItems" class="list-item" :key="index">
                      <img :src='item.iconUrl' alt="">
                      <label>{{item.name}}</label>
                  </li>
                </ul>
            </cube-scroll>
        </div>
        <!-- 新歌推荐 -->
        <div class="popSong">
            <div class="songTitle">
                <span class="leftTitle">宝藏歌单，值得聆听</span>
                <span class="rightMore">查看更多</span>
            </div>
            <swiper class="songScroll" ref="mySwiper" :options="swiperOptions">
                <swiper-slide class="scroll-items"  v-for="(item,index) in songRecommend" :key="index"> 
                    <a :href="item.url" class="scroll-item"> 
                        <img :src='item.uiElement.image.imageUrl' alt=""/>
                        <div>{{item.uiElement.mainTitle.title}}</div>
                    </a>
                </swiper-slide>
            </swiper>
        </div>
        <!-- 根据推荐的歌曲 -->
        <div class="newSong">
            <div class="songTitle">
                <span class="leftTitle">好听的华语歌曲精选</span>
                <span class="rightMore">播放全部</span>
            </div>
            <swiper ref="mySwiper">
                <swiper-slide  v-for="(item,index) in newSong" :key="index">
                    <div class="song-items" v-for="(item,index) in item.resources" :key="index">
                        <div class="song-item">
                            <div class="leftTitle">
                                <img :src="item.uiElement.image.imageUrl">
                                <div class="desc">
                                    <p class="mainTitle">{{item.uiElement.mainTitle.title}}</p>
                                    <p class="subTitle" style="font-size:5px;padding:0 5px;">- {{item.resourceExtInfo.artists[0].name}}</p>
                                </div>
                            </div>
                            <div class="rightArrow"></div>
                        </div>
                    </div>
                </swiper-slide>
            </swiper>
        </div>
        <!-- 底部音乐固定 -->
        <div></div>
    </div>
</template>

<script>
export default {
    name:'find',
    data() {
    return {
        cards: [],
        selectItems:[],
        songRecommend:[],
        newSong:[],
        swiperOptions: {
            slidesPerView:4,
            slidesPerGroup:2
        }
    }
  },
  async created(){
        try{
            //获取轮播图数据
            const data1=await this.$http.get('http://localhost:3000/banner');
            this.cards=data1.data.banners;
            //获取滚动分类数据
            const data2=await this.$http.get('http://localhost:3000/homepage/dragon/ball');
            this.selectItems=data2.data.data;
            console.log(data2.data.data)
            //获取歌单推荐数据,获取新歌推荐卡片数据
            const data3=await this.$http.get('http://localhost:3000/homepage/block/page');
            //好歌推荐
            this.songRecommend=data3.data.data.blocks[0].creatives;
            //精选歌曲
            this.newSong=data3.data.data.blocks[1].creatives;
            console.log(data3.data.data.blocks[1].creatives[0]);
            //
        }catch (err){
            console.log(err);
        }
    },
    methods:{

    },
    mounted(){
    }
}
</script>

<style lang="stylus" >
    #find
        position relative
        top 49px
        left 0px
        width 100%
        height 100% 
        header  
            width 100%
            height 100px
            background-color #e6463a
            .cube-slide
                position relative
                top 20px
                width 89%
                height 130px
                margin 0 auto
                border-radius 10px
                box-shadow 0px 0px 1px #ffffff
                .cube-slide-item
                    img
                        width 100%
                        height 100%
        .selection
            margin-top 60px
            height 65px
            .horizontal-scroll-list-wrap
                .cube-scroll-content
                    display inline-block
                    width 720px
                    .list-wrapper
                        display flex
                        flex-direction row
                        justify-content center
                        align-items center
                        padding 0 10px
                        .list-item
                            display flex
                            flex-direction column
                            justify-content center
                            align-items center
                            padding 0 15px
                            img 
                                width 40px
                                height 40px
                                border-radius 50%
                                background-color #e6463a
                            label 
                                margin-top 7px
                                font-size 12px
                                color #a5a5a5
        .popSong
            .songTitle
                display flex
                flex-direction row
                justify-content space-between
                align-items center
                margin-top 15px
                .leftTitle
                    font-weight 800
                    font-size 15px
                    padding-left 20px 
                .rightMore
                    font-size 6px
                    color #74787c
                    padding 2px 5px
                    border 1px solid #74787c
                    margin-right 15px
                    border-radius 10px
            .songScroll
                margin-top 10px
                .scroll-items:first-child
                    margin-left 15px
                .scroll-item
                    img 
                        width 70px
                        height 70px
                        border-radius 10%
                    div
                        font-size 8px
                        line-height 12pt
                        width 70px
                        display -webkit-box
                        -webkit-box-orient vertical
                        -webkit-line-clamp 2
                        overflow hidden
        .newSong    
            .songTitle   
                display flex  
                flex-direction row
                justify-content space-between
                align-items center
                margin-top 15px
                .leftTitle
                    font-weight 800
                    font-size 15px
                    padding-left 20px 
                .rightMore
                    font-size 6px
                    color #74787c
                    padding 2px 5px
                    border 1px solid #74787c
                    margin-right 15px
                    border-radius 10px
            .song-items
                .song-item
                    display flex
                    flex-direction row
                    justify-content space-between
                    align-items center
                    margin-top 10px
                    padding-left 15px
                    .leftTitle
                        display flex
                        flex-direction row
                        align-items center
                        img 
                            width 50px
                            height 50px
                            border-radius 10px
                        .desc  
                            display flex
                            flex-direction row
                            justify-content space-around
                            align-items center
                            .mainTitle
                                width 90px 
                                font-size 12px
                                padding-left 10px
                                display -webkit-box
                                -webkit-box-orient vertical
                                -webkit-line-clamp 1
                                overflow hidden
                            .subTitle
                                font-size 4px
                                color #a5a5aa                      
</style>